---
import { getCollection } from "astro:content";
import BaseLayout from "@layouts/BaseLayout.astro";
import HeroCard from "@components/HeroCard.astro";
import Card from "@components/CommonCard.astro";
import Pagination from "@components/Pagination.astro";
import { SITE_TITLE, SITE_DESCRIPTION } from "@consts";

const allPosts = await getCollection("posts");
allPosts.sort(
  (a, b) =>
    new Date(b.data.pubDate).valueOf() - new Date(a.data.pubDate).valueOf(),
);

const postsPerPage = 15;
const firstPagePosts = allPosts.slice(0, postsPerPage);
const totalPages = Math.ceil(allPosts.length / postsPerPage);

const basePath = "/page/";
---
<BaseLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
  <div class="grid grid-cols-1">
    <div class="col-span-1 mb-4">
      {firstPagePosts.length > 0 && <HeroCard post={firstPagePosts[0]} />}
    </div>

    <div class="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2">
      {firstPagePosts.slice(1, 3).map((post) => <Card post={post} />)}
    </div>

    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
      {firstPagePosts.slice(3).map((post) => <Card post={post} />)}
    </div>
  </div>

  <Pagination
    currentPage={1}
    lastPage={totalPages}
    urlPrev={null}
    urlNext={totalPages > 1 ? `/page/2` : null}
    basePath={basePath}
    maxDisplayedPages={5}
  />
</BaseLayout>
